import React, { PropTypes, Component } from 'react';
import Table from './MyTable'
import Column from './Column'
import { myAjax, getAuthShop, ROOTURL_TABLE } from './../publicAPI/publicAPI';
import styles from './SimpleTable.css';

export default React.createClass({
  getInitialState: function() {
    let date = new Date();
    return {
      tData: [{}],
      shopsForAdm: [],
      shopNameArray: [],
      shopForTypes: [],
      processData: [{}],
      rawData: {},
      shopSelect: '请选择门店',
    };
  },
  componentWillMount: function() {
    let _this = this;
  },
  componentDidMount: function() {
    let _this = this;
    this.getData();
  },
  getData: function() {
    let _this = this;
    console.log('执行getData');
    fetch(ROOTURL_TABLE + 'cafune/servant/serdaystdata.api', { 
      method: 'GET',
      headers: { 
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 
      },  
    })
    .then((response) => {
      if(response.ok) {
        response.json().then(function(data) {
          _this.setState({
            rawData: data,
            shopForTypes: data.shopForTypes,
          }, () => {
            getAuthShop(null, function(data) {
              _this.setState({
                shopsForAdm: data,
              }, () => {
                // 处理数据格式为[{}]                
                let shopNameArray = new Set();
                let ids = _this.state.rawData.servantIds;               
                let processData = [];
                for(var i in ids) {
                  let id = ids[i];
                  let a = {servantName: _this.state.rawData[id].servantName, servantShop: _this.state.rawData[id].servantShop, servantShopLoc: _this.state.rawData[id].servantShopLoc};
                  let b = _this.state.rawData[id].dailyServeTypeCount;
                  processData.push(Object.assign(a, b));
                  shopNameArray.add(_this.state.rawData[id].servantShop);             
                }
                // 设置相应state，并回调执行地区筛选
                _this.setState({
                  processData: processData,
                  shopNameArray: Array.from(shopNameArray),
                });
              });
            });
          });
        });
      } else {
        console.log("Looks like the response wasn't perfect, got status", response.status);
      }
    })
    .catch((erroe) => {
      alert("获取服务器内容失败");
      console.log('Request failed', error);
    });
  },
  changeShop: function(e) {
    let _this = this;
    let shopSelect = e.target.value;
    this.setState({
      shopSelect: shopSelect,
    }, () => {
      _this.filterData();
    });
  },
  filterData: function() {// 按地区筛选数据
    console.log('执行filterData');
    let _this = this;
    let shopSelect = this.state.shopSelect;
    let selectData = this.state.processData.filter((data) => {
      return data.servantShop == shopSelect
    });
    this.setState({
      tData: selectData,
    });
  },
  render: function() {
    return (
      <div>
        <div>
          <select value={this.state.shopSelect} onChange={this.changeShop} className={styles['select']}>
            <option value="请选择门店">请选择门店</option>
            {
              !this.state.shopNameArray[0]||this.state.shopNameArray.map((name, index) => {
                return (
                  <option key={name} value={name}>{name}</option>
                );
              })
            }
          </select>
        </div>
        <div>
        <Table data={this.state.tData} className={styles.container}>
          <Column dataKey='servantName' name='理发师' width="400px" order="false" key={`col-servantName`}/>
          <Column dataKey='servantShop' name='所属门店' width="400px" order="false" key={`col-servantShop`}/>
          <Column dataKey='servantShopLoc' name='所属门店' width="400px" order="false" key={`col-servantShopLoc`}/>
          {
            (this.state.tData == 0)? '' : Object.keys(this.state.tData[0]).map(entry => {
              if(/servantName/.test(entry) || /servantShop/.test(entry) || /servantShopLoc/.test(entry)) {
                return
              } else {
                return <Column dataKey={entry} name={entry} width="400px" key={`col-${entry}`}/>
              }               
            })
          }
        </Table>
        </div>
      </div>
    );
  }
});
